<template>
  <view class="tool-content">
    <view class="tool-title">
      <view class="tool-title-left">
        <image class="icon" src="/static/images/tool.png" />
        <p class="text-label-left">常用工具</p>
      </view>
      <view class="tool-title-right" @click="handleClickCommonTools">
        <p class="text-label-right" style="margin-right: 5rpx">管理工具</p>
        <p class="text-label-right">></p>
      </view>
    </view>
    <view class="normal-box">
      <view
        class="tool-normal-content"
        :class="{ 'center-content': tablist.length === 4 }"
      >
        <view
          class="tool-item mb28"
          v-for="(item, index) in tablist"
          :key="index"
          @click="handleToolClick(item)"
        >
          <image
            class="iconImg"
            :src="item.icon || '/static/images/xgjd/spdy.png'"
          ></image>
          <view class="name">{{ item.toolName }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useRouter } from 'vue-router';
import api from '@/api/modules/event';

let role = ref('leader');
const tablist = ref<Array<{ name: string; path: string; icon?: string }>>([]);
const router = useRouter();

// 根据角色设置不同的工具列表
const setToolsByRole = (
  tools: Array<{ toolName: string; path: string; icon?: string }>
) => {
  tablist.value = tools;
};

// 处理工具点击事件
const handleToolClick = (item: { name: string; path: string }) => {
  if (item.name === '场景合集') {
    uni.navigateTo({
      url: '/pages/index/component/ggaq/SceneManagement', // 替换为你的实际页面路径
    });
  } else {
    // 其他工具的点击处理逻辑
    console.log('Clicked on:', item.name);
  }
};

const handleClickCommonTools = () => {
  uni.navigateTo({
    url: '/pages/tools/tools', // 替换为你的实际页面路径
  });
};

// 初始化调取gettools接口 获取接口数据
const fetchTools = async () => {
  try {
    const res = await api.gettools();
    console.log('工具列表数据:', res);
    setToolsByRole(res.data.regularTools);
    console.log('工具列表:', tablist.value);
  } catch (error) {
    console.error('获取工具列表失败', error);
  }
};

// 在组件挂载时初始化
onLoad(() => {
  fetchTools();
});
</script>

<style scoped>
.tool-content {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
}
.tool-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 28.5rpx;
}
.tool-title-left,
.tool-title-right {
  display: flex;
  align-items: center;
}
.tool-title-left .icon {
  margin-right: 10rpx;
}
.tool-title-right .icon {
  margin-left: 10rpx;
  cursor: pointer;
}
.icon {
  width: 38rpx;
  height: 38rpx;
}
.text-label-left {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 29rpx;
  color: #000000;
  line-height: 42rpx;
}
.text-label-right {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 23rpx;
  color: #2263bf;
  line-height: 33rpx;
}
.normal-box {
  padding: 35rpx 0 25rpx 0;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 56rpx 0rpx rgba(70, 102, 149, 0.06);
  border-radius: 15rpx;
  height: 212rpx;
}
.tool-normal-content {
  display: flex;
  /* justify-content: center; */
  align-items: center;
}
.tool-normal-content.center-content {
  justify-content: center; /* 如果长度为4，居中显示 */
}
.tool-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 160rpx;
  cursor: pointer; /* 添加鼠标指针样式 */
}
.iconImg {
  width: 100rpx;
  height: 100rpx;
}
.name {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 23rpx;
  color: #999999;
  line-height: 33rpx;
  margin-top: 17rpx;
}
</style>
